<template>
  <div>
    <div class="header">
      <span>上周试题新增</span>
      <i class="el-icon-warning"></i>
    </div>
    <div class="body" ref="myDiv">202,210</div>

    <hr />
    <div class="footer">
      <span>日答题数量</span>
      <span>12345</span>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "newQuestion",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv); // 得到图表实例
    myChart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      //   legend: {
      //     icon: "circle",
      //     orient: "horizontal",
      //     itemGap: 40,
      //     itemWidth: 14,
      //     itemHeight: 14,
      //     textStyle: {
      //       fontSize: 14,
      //       color: "#858585",
      //       fontWeight: 400,
      //       padding: [4, 0, 0, 0],
      //     },
      //     data: ["A", "B", "P", "E"],
      //   },
      color: ["#7E84A3", "#FF914C", "#5189F8", "#3FC7BB"],
      grid: {
        left: "15%",
        right: "10%",
        bottom: "15%",
        containLabel: false,
        height: 120,
      },
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#6fbde3", //坐标线的颜色
          },
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#6fbde3", //坐标线的颜色
          },
        },
        splitArea: {
          show: true,
          interval: 0,
          areaStyle: {
            color: ["#f9f9f9", "white"], //这里重点，用于设置颜色的数组，
            //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
          },
        },
        splitLine: {
          lineStyle: {
            color: "#eeeeee",
          },
        },
      },
      series: [
        {
          name: "P",
          type: "bar",
          stack: "total",
          label: {
            // show: true,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          itemStyle: {
            normal: { color: "#50d6d9" },
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 610],
        },
        {
          name: "B",
          type: "bar",
          stack: "total",
          label: {
            // show: true,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          itemStyle: {
            normal: { color: "#c8b6eb" },
          },
          emphasis: {
            focus: "series",
          },
          data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
        },
        {
          name: "A",
          type: "bar",
          stack: "total",
          label: {
            // show: true,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          itemStyle: {
            normal: { color: "#77c3f4" },
          },
          emphasis: {
            focus: "series",
          },
          data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
        },
      ],
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  color: #97a8be;
  height: 25px;
  span {
    font-size: 14px;
  }
}
.body {
  font-size: 30px;
  height: 160px;
  line-height: 140px;
  padding-left: 0px;
}

hr {
  border-top: 1px solid #e8e8e8;
  margin: 0 0 10px 0;
}
.footer span {
  margin-right: 8px;
}
</style>
